<template>
  <div class="header">
    <h1>可视化-项目</h1>
    <span>当前时间： {{ time }}</span>
  </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';

const time = ref('');

const getTime = () => {
  // 获取当前时间
  const currentTime = new Date();
  // 年月日
  const year = currentTime.getFullYear()
  const month = (currentTime.getMonth() + 1).toString().padStart(2, '0')
  const date = currentTime.getDate().toString().padStart(2, '0')
  const hour = currentTime.getHours().toString().padStart(2, '0')
  const min = currentTime.getMinutes().toString().padStart(2, '0')
  const sec = currentTime.getSeconds().toString().padStart(2, '0')

  time.value = `${year}年${month}月${date}日-${hour}时${min}分${sec}秒`
}

getTime();
setInterval(getTime, 1000)
</script>


<style lang="scss">

.header {
  background: url(../../assets/images/head_bg.png) 100% 100%;
  height: (100px);
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;

  h1 {
    color: white;
    text-align: center;
    font-size: (40px);
  }

  span {
    position: absolute;
    right: (10px);
    top: 50%;
    transform: translateY(-50%);
    color: rgba($color: #fff, $alpha: .7);
    font-size: (20px);
  }
}
</style>